<template>
  <div class="star"
       :class="`star-${size}`">
    <span v-for="(item,index) in starClasses"
          class="star_item"
          :class="item"
          :key="index">
    </span>
  </div>
</template>
<script>
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
export default {
  props: ['score', 'size'],
  computed: {
    starClasses () {
      const scs = []
      let score = this.score
      let scoreeInteger = Math.floor(score)
      for (let i = 0; i < scoreeInteger; i++) {
        scs.push(CLASS_ON)
      }
      if (score - scoreeInteger >= 0.5) {
        scs.push(CLASS_HALF)
      }
      while (scs.length < 5) {
        scs.push(CLASS_OFF)
      }
      return scs
    }
  }
}
</script>
<style lang="stylus">
@import '../../common/stylus/mixins.styl';

.star-24 {
  .star_item {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-size: 10px 10px;
  }

  .on {
    bg_star(star24_on);
  }

  .half {
    bg_star(star24_half);
  }

  .off {
    bg_star(star24_off);
  }
}

.star-36 {
  .star_item {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 15px 15px;
  }

  .on {
    bg_star(star36_on);
  }

  .half {
    bg_star(star36_half);
  }

  .off {
    bg_star(star36_off);
  }
}

.star-48 {
  .star_item {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
  }

  .on {
    bg_star(star48_on);
  }

  .half {
    bg_star(star48_half);
  }

  .off {
    bg_star(star48_off);
  }
}
</style>
